<template>
    <div class="page-title">挂账还款查询</div>
    <el-form class="search-form" inline label-width="auto" :model="searchForm">
            <el-row :gutter="0">
                <el-col :span="5">
                    <el-form-item class="search-form-item" label="挂账人:">
                        <el-input v-model="searchForm.mountUser" clearable placeholder="请输入挂账人" />
                    </el-form-item>
                </el-col>   
                <el-col :span="5">
                    <el-form-item class="search-form-item" label="买单批次号:">
                        <el-input v-model="searchForm.payBatchCode" clearable placeholder="请输入买单批次号" />
                    </el-form-item>
                </el-col> 
                <el-col :span="5">
                    <el-form-item class="search-form-item" label="订单号:">
                        <el-input v-model="searchForm.mountCode" clearable placeholder="请输入订单号" />
                    </el-form-item>
                </el-col> 
                <el-col :span="5">
                    <el-form-item class="search-form-item" label="还款状态:">
                        <el-select v-model="searchForm.mountState" filterable clearable placeholder="请选择还款状态">
                            <el-option v-for="item in mountState_options" :key="item.code" :value="item.code" :label="item.name" />
                        </el-select>
                    </el-form-item>
                </el-col> 
                <el-col :span="4">
                    <el-form-item class="search-form-item" label="手机号:">
                        <el-input v-model="searchForm.mountMobile" clearable placeholder="请输入手机号" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item class="search-form-item" label="挂账时间:">
                        <el-date-picker v-model="searchForm.operDate" type="datetimerange" start-placeholder="开始时间"
                            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
                    </el-form-item>
                </el-col> 
               
                <el-col :span="10">
                    <el-form-item class="search-form-item" label="最后一次划款时间:" >
                        <el-date-picker v-model="searchForm.lastDate" type="datetimerange" start-placeholder="开始时间"
                            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
                    </el-form-item>
                </el-col> 
                <el-col :span="6">
                    <el-form-item class="action-btn-box">
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                        <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
                    </el-form-item>
                </el-col> 
                </el-row>
           
        <div>
         
        
        </div>
    </el-form>
    <div class="table-box">
        <div class="total-box">
            <div>总挂账金额：<span class="color-FF6A00">{{ headData.totalAmt }}</span></div>
            <div>总已还款金额：<span class="color-FF6A00">{{ headData.payAmt }}</span></div>
            <div>总未还款金额：<span class="color-FF6A00">{{ headData.unPayAmt }}</span></div>
        </div>
        <el-table :data="tableData" stripe v-loading="loading">
            <el-table-column type="index" label="序号" :min-width="orderColumnWidth"   align="center"/>
            <el-table-column prop="mountCode" label="订单号" :min-width=" tableColumnWidth"   align="center"/>
            <el-table-column prop="payBatchCode" label="买单批次号" :min-width=" tableColumnWidth"   align="center"/>
            <el-table-column prop="mountUser" label="挂账人" :min-width="orderColumnWidth"   align="center"/>
            <el-table-column prop="mountMobile" label="手机号" :min-width="tableColumnWidth"   align="center"/>
            <el-table-column prop="mountDate" label="挂账时间" :min-width=" tableColumnWidth"   align="center"/>
            <el-table-column prop="roomName" label="桌台" :min-width="orderColumnWidth"   align="center"/>
            <el-table-column prop="totalAmt" label="挂账金额" :min-width="orderColumnWidth"   align="center"/>
            <el-table-column prop="unPayAmt" label="未还金额" :min-width="orderColumnWidth"   align="center"/>
            <el-table-column prop="mountState" label="还款状态" :min-width="orderColumnWidth">
                <template #default="scope">
                    <!-- "挂账状态 1:已支付 0：已退款" -->
                    <span class="color-FF6A00">{{ parse_mountState(scope.row.mountState) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="suretyUser" label="担保人" :min-width="orderColumnWidth"   align="center"/>
            <el-table-column prop="opUser" label="操作人" :min-width="orderColumnWidth"   align="center"/>
            <el-table-column prop="lastPayTime" label="最后一次还款时间" :min-width=" tableColumnWidth"   align="center"/>
            <el-table-column prop="remark" label="备注" :min-width=" tableColumnWidth"  align="center"/>
            <el-table-column prop="" label="操作" :min-width=" tableColumnWidth" fixed="right">
                <template #default="scope">
                    <el-button class="action-btn" @click="handleReturn(scope.row)"> 还款</el-button>
                    <el-button class="action-btn" @click="handleRecord(scope.row)"> 还款记录</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- <div class="pagination-box">
        <el-pagination background layout="prev, pager, next,sizes, jumper, total" :total="total" :current-page="currentPage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:10px" />
    </div> -->
    <div class="orderRecords-container-footer">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper"
            :total="total">
        </el-pagination>
        <button class="footer-button">确定</button>
    </div>
</template>
  
<script setup>

import Api from '@/api'
const router = useRouter()

const tableColumnWidth = ref('200')
const orderColumnWidth = ref('190')
window.addEventListener("resize",readerSize)
function readerSize (){
    console.log(window.innerWidth,'window.innerWidth2222222');
    if(window.innerWidth >= 1200){
        tableColumnWidth.value = '160'
    }else if(window.innerWidth >= 800 && window.innerWidth < 1200){
        tableColumnWidth.value = '120'
    }else if(window.innerWidth >= 400 && window.innerWidth < 800){
        tableColumnWidth.value = '80'
        orderColumnWidth.value = '40'
    }else if(window.innerWidth < 400 ){
        tableColumnWidth.value = '40'
        orderColumnWidth.value = '20'
    } 
}

// mountState:"还款状态 0未支付 1部分支付 2已支付"
const parse_mountState = (params) => {
    switch (params) {
        case 0:
            return '未支付'
        case 1:
            return '部分支付'
        case 2:
            return '已支付'
    }
}
// 获取服务员OPTIONS
let mountState_options = ref([])
const get_mountState_options = (params) => {
    mountState_options.value = [
        { name: '未支付', code: 0 },
        { name: '部分支付', code: 1 },
        { name: '已支付', code: 2 },
    ]
    return
    Api.Common.PcObjProcess.Do({ "functionName": "getWaiterList", "orgCode": "0004", "contentData": { parentCode: '571' } }).then(res => {
        console.log('获取服务员OPTIONS res :>> ', res,);
        mountState_options.value = res.result
    })
}
get_mountState_options()

let loading = ref(false)
let searchForm = ref({})
// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    searchForm.value = {}
    handleSearch()
}
// 查询表格数据
let headData = ref({})
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}
const getTableData = (user) => {
    let query = {
        ...searchForm.value,
        pageIndex: currentPage.value,
        pageSize: pageSize.value
    }
    if (query.operDate && query.operDate.length > 1) {
        query.beginTime = query.operDate[0]
        query.endTime = query.operDate[1]
    }
    if (query.lastDate && query.lastDate.length > 1) {
        query.lastBeginTime = query.lastDate[0]
        query.lastEndTime = query.lastDate[1]
    }
    console.log('查询前的query :>> ', query,);
    loading.value = true
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "GetMountList", "orgCode": "0004", "contentData": query }).then(res => {
        console.log('查询订单table res :>> ', res,);
        loading.value = false
        tableData.value = res.data.listData
        total.value = res.totalCount
        headData.value = res.data.headData
    })
}
getTableData()

// 点击还款
const handleReturn = (params) => {
    const { consumeCode, payBatchCode, roomCode, payItemCode } = params
    router.push({
        path: '/order/payment',
        query: {
            consumeCode,
            payBatchCode,
            roomCode,
            payItemCode,
            price: params.unPayAmt,
            todo: 'mountPay'
        }
    })
}

// 点击还款记录
const handleRecord = (row) => {
    router.push({
        path: '/cashier/returnRecord',
        query: {
            mountCode: row.mountCode
        }
    })
}


</script>
  
<style scoped lang="scss">
@import '@/styles/com_style_input.css';
/* 在这里编写组件的CSS样式 */
// .app-container {}
::v-deep{
    .el-form-item__label-wrap{
        margin-left: 0px !important;
    }
}
.search-form {
    width: 1520px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 10px 0 40px;
    margin-bottom: 20px;

    // display: flex;
    .search-form-item {
        ::v-deep {
            .el-form-item__label {
                line-height: 48px;
            }

            .el-date-editor {
                width: 350px;

            }

            .el-input {
                width: 220px;
            }

            .el-input__wrapper {
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }

            .el-select__wrapper {
                width: 160px;
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }
        }
    }


    .action-btn-box {
        float: right;
        margin-right: 0px;

        button {
            width: 120px;
            height: 48px;
            line-height: 48px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }

        .reset-btn {
            background: #E6E6E6;
            color: #666666;
        }
    }
}

.table-box {
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 8px;
    width: 1520px;

    .total-box {
        display: flex;
        // justify-content: space-between;
        margin-bottom: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;

        >div {
            margin-right: 40px;
        }
    }

    .el-table--fit {
        height: 400px;
  }

    ::v-deep {
        .el-table__inner-wrapper::before {
            height: 0px;
        }

        .el-table th {
            font-size: 13px;
            font-weight: 700;
        }

        .el-table .el-table__header th,
        .el-table .el-table__header tr,
        .el-table .el-table__header td {
            height: 48px;
            background: #F9F9F9;
        }
    }

    .action-btn {
        width: 66px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FF6A00;
    }
}

.pagination-box {
    margin-top: 20px;

    ::v-deep {
        .number {
            background: #E6E6E6 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }

        .number:hover {
            color: #FF6A00;
        }

        .is-active {
            background-color: #FF6A00 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
        }

    }
}

.color-FF6A00 {
    color: #FF6A00;
}

.page-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    margin-bottom: 10px;
}
::v-deep .el-table .cell {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 0.07292rem;
    color: #666666;
    line-height: 0.07292rem;
}
</style>
  